<!--
@license
Copyright 2017 The TensorFlow Authors. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-menu/paper-menu.html">
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../tf-backend/tf-backend.html">
<link rel="import" href="../tf-line-chart-data-loader/tf-line-chart-data-loader.html">
<link rel="import" href="../tf-card-heading/tf-card-heading.html">

<!--
  A card that handles loading data (at the right times), rendering a scalar
  chart, and providing UI affordances (such as buttons) for scalar data.
-->
<dom-module id="tf-scalar-card">
<template>
  <tf-card-heading
    tag="[[tag]]"
    display-name="[[tagMetadata.displayName]]"
    description="[[tagMetadata.description]]"
  ></tf-card-heading>
  <div id="tf-line-chart-data-loader-container">
    <tf-line-chart-data-loader
      x-type="[[xType]]"
      smoothing-enabled="[[smoothingEnabled]]"
      smoothing-weight="[[smoothingWeight]]"
      tooltip-sorting-method="[[tooltipSortingMethod]]"
      ignore-y-outliers="[[ignoreYOutliers]]"
      request-manager="[[requestManager]]"
      runs="[[runs]]"
      tag="[[tag]]"
      tag-metadata="[[tagMetadata]]"
      active="[[active]]"
      data-url="[[_dataUrl]]"
      log-scale-active="[[_logScaleActive]]"
      process-data="[[_processData]]"
    >
    </tf-line-chart-data-loader>
  </div>
  <div id="buttons">
    <paper-icon-button
      selected$="[[_expanded]]"
      icon="fullscreen"
      on-tap="_toggleExpanded"
    ></paper-icon-button>
    <paper-icon-button
      selected$="[[_logScaleActive]]"
      icon="line-weight"
      on-tap="_toggleLogScale"
      title="Toggle y-axis log scale"
    ></paper-icon-button>
    <paper-icon-button
      icon="settings-overscan"
      on-tap="_resetDomain"
      title="Fit domain to data"
    ></paper-icon-button>
    <span style="flex-grow: 1"></span>
    <template is="dom-if" if="[[showDownloadLinks]]">
      <div class="download-links">
        <paper-dropdown-menu
          no-label-float="true"
          label="run to download"
          selected-item-label="{{_runToDownload}}"
        >
          <paper-menu class="dropdown-content" slot="dropdown-content">
            <template is="dom-repeat" items="[[runs]]">
              <paper-item no-label-float=true>[[item]]</paper-item>
            </template>
          </paper-menu>
        </paper-dropdown-menu>
        <a
          download="run_[[_runToDownload]]-tag-[[tag]].csv"
          href="[[_csvUrl(tag, _runToDownload)]]"
        >CSV</a> <a
          download="run_[[_runToDownload]]-tag-[[tag]].json"
          href="[[_jsonUrl(tag, _runToDownload)]]"
        >JSON</a>
        </div>
      </div>
    </template>
  </div>
  <style>
    :host {
      margin: 5px;
      display: block;
      width: 330px;
    }

    :host[_expanded] {
      width: 100%;
    }

    :host[_expanded] #tf-line-chart-data-loader-container {
      height: 400px;
    }

    #tf-line-chart-data-loader-container {
      height: 200px;
      width: 100%;
    }

    tf-card-heading {
      display: block;
      margin-bottom: 10px;
    }

    #buttons {
      display: flex;
      flex-direction: row;
    }

    paper-icon-button {
      color: #2196F3;
      border-radius: 100%;
      width: 32px;
      height: 32px;
      padding: 4px;
    }

    paper-icon-button[selected] {
      background: var(--tb-ui-light-accent);
    }

    .download-links {
      display: flex;
      height: 32px;
    }

    .download-links a {
      font-size: 10px;
      align-self: center;
      margin: 2px;
    }

    .download-links paper-dropdown-menu {
      width: 100px;
      --paper-input-container-label: {
        font-size: 10px;
      }
      --paper-input-container-input: {
        font-size: 10px;
      }
    }
  </style>
</template>
<script>
  Polymer({
      is: 'tf-scalar-card',
      properties: {
        runs: Array,  // of String
        tag: String,

        /**
         * @type {vz_line_chart.XType}
         */
        xType: String,

        active: Boolean,
        ignoreYOutliers: Boolean,
        requestManager: Object,
        showDownloadLinks: Boolean,
        smoothingEnabled: Boolean,
        smoothingWeight: Number,
        tagMetadata: Object,
        tooltipSortingMethod: String,

        // This function is called when data is received from the backend.
        _processData: {
          type: Object,
          value: () => ((scalarChart, run, data) => {
            const formattedData = data.map(datum => ({
              wall_time: new Date(datum[0] * 1000),
              step: datum[1],
              scalar: datum[2],
            }));
            scalarChart.setSeriesData(run, formattedData);
          }),
          readOnly: true,
        },

        _expanded: {
          type: Boolean,
          value: false,
          reflectToAttribute: true,  // for CSS
        },

        _logScaleActive: Boolean,

        _dataUrl: {
          type: Function,
          value: () => (tag, run) => tf_backend.addParams(
              tf_backend.getRouter().pluginRoute('scalars', '/scalars'), {tag, run}),
        },
      },
      reload() {
        this.$$('tf-line-chart-data-loader').reload();
      },
      redraw() {
        this.$$('tf-line-chart-data-loader').redraw();
      },
      _toggleExpanded(e) {
        this.set('_expanded', !this._expanded);
        this.redraw();
      },
      _toggleLogScale() {
        this.set('_logScaleActive', !this._logScaleActive);
      },
      _resetDomain() {
        const chart = this.$$('tf-line-chart-data-loader');
        if (chart) {
          chart.resetDomain();
        }
      },
      _csvUrl(tag, run) {
        return tf_backend.addParams(this._dataUrl(tag, run), {format: 'csv'});
      },
      _jsonUrl(tag, run) {
        return this._dataUrl(tag, run);
      },
  });
</script>
</dom-module>
